<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        .tag-item {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 13px;
            margin-right: 8px;
            white-space: nowrap;
            color: #666;
            background-color: #f0f0f0;
        }
        .tag-item.active {
            color: white;
            background-color: #0052d9;
        }
        .favorite-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .badge {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .secondary-btn {
            background-color: #f0f0f0;
            color: #666;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .outline-btn {
            border: 1px solid #0052d9;
            color: #0052d9;
            background-color: white;
            border-radius: 4px;
            padding: 6px 12px;
            font-size: 12px;
        }
        .action-bar {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border-radius: 8px 8px 0 0;
        }
    </style>
</head>
<body class="pb-16">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../core/profile.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">我的收藏</h1>
        <button class="text-sm text-gray-500" id="editBtn">管理</button>
    </header>

    <!-- 分类标签 -->
    <div class="bg-white p-3 overflow-x-auto">
        <div class="flex">
            <div class="tag-item active">全部</div>
            <div class="tag-item">景点</div>
            <div class="tag-item">美食</div>
            <div class="tag-item">酒店</div>
            <div class="tag-item">康养</div>
            <div class="tag-item">活动</div>
            <div class="tag-item">文章</div>
        </div>
    </div>

    <!-- 搜索框 -->
    <div class="bg-white p-3 border-t border-gray-100">
        <div class="flex items-center bg-gray-100 rounded-full px-3 py-2">
            <i class="icon iconfont icon-search text-gray-400 text-sm mr-2"></i>
            <input type="text" placeholder="搜索收藏内容" class="bg-transparent border-none flex-1 text-sm focus:outline-none">
        </div>
    </div>

    <!-- 收藏列表 -->
    <div class="p-3">
        <!-- 景点收藏 -->
        <div class="favorite-card mb-4">
            <div class="relative">
                <img src="https://via.placeholder.com/750x380?text=黄果树瀑布" class="w-full h-48 object-cover" alt="景点图片">
                <div class="absolute top-2 right-2 badge">景点</div>
                <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent">
                    <div class="text-white font-medium">黄果树瀑布</div>
                    <div class="text-white text-xs mt-1 opacity-80">贵州安顺市镇宁布依族苗族自治县</div>
                </div>
            </div>
            <div class="p-3 flex justify-between items-center">
                <div class="text-xs text-gray-500">收藏于：2025-06-01</div>
                <div class="flex">
                    <button class="secondary-btn mr-2">查看详情</button>
                    <button class="outline-btn">分享</button>
                </div>
            </div>
        </div>

        <!-- 美食收藏 -->
        <div class="favorite-card mb-4">
            <div class="flex p-3">
                <div class="w-24 h-24 bg-gray-100 rounded-md overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/96x96?text=丝娃娃" class="w-full h-full object-cover" alt="美食图片">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="text-sm font-medium">贵州丝娃娃</div>
                        <div class="badge">美食</div>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">贵阳传统小吃坊</div>
                    <div class="text-xs text-gray-500 mt-1">贵阳市南明区花果园J区负1层</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm">¥38/份</div>
                        <div class="text-xs text-gray-500">收藏于：2025-05-28</div>
                    </div>
                </div>
            </div>
            <div class="p-3 flex justify-end border-t border-gray-100">
                <button class="secondary-btn mr-2">查看详情</button>
                <button class="outline-btn">分享</button>
            </div>
        </div>

        <!-- 酒店收藏 -->
        <div class="favorite-card mb-4">
            <div class="flex p-3">
                <div class="w-24 h-24 bg-gray-100 rounded-md overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/96x96?text=温泉酒店" class="w-full h-full object-cover" alt="酒店图片">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="text-sm font-medium">贵州温泉度假酒店</div>
                        <div class="badge">酒店</div>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">★★★★★ 5.0分 | 大床房</div>
                    <div class="text-xs text-gray-500 mt-1">贵阳市观山湖区金阳新区</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm">¥688/晚</div>
                        <div class="text-xs text-gray-500">收藏于：2025-05-20</div>
                    </div>
                </div>
            </div>
            <div class="p-3 flex justify-end border-t border-gray-100">
                <button class="secondary-btn mr-2">查看详情</button>
                <button class="outline-btn">分享</button>
            </div>
        </div>

        <!-- 康养收藏 -->
        <div class="favorite-card mb-4">
            <div class="flex p-3">
                <div class="w-24 h-24 bg-gray-100 rounded-md overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/96x96?text=康养项目" class="w-full h-full object-cover" alt="康养项目图片">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between">
                        <div class="text-sm font-medium">贵州特色中医养生套餐</div>
                        <div class="badge">康养</div>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">包含：艾灸、推拿、中药足浴</div>
                    <div class="text-xs text-gray-500 mt-1">贵阳市云岩区中医院康养中心</div>
                    <div class="flex justify-between items-center mt-2">
                        <div class="text-red-500 text-sm">¥268/次</div>
                        <div class="text-xs text-gray-500">收藏于：2025-05-15</div>
                    </div>
                </div>
            </div>
            <div class="p-3 flex justify-end border-t border-gray-100">
                <button class="secondary-btn mr-2">查看详情</button>
                <button class="outline-btn">分享</button>
            </div>
        </div>

        <!-- 文章收藏 -->
        <div class="favorite-card">
            <div class="p-3">
                <div class="flex justify-between">
                    <div class="text-sm font-medium">贵州旅游攻略：四季康养最佳去处</div>
                    <div class="badge">文章</div>
                </div>
                <div class="text-xs text-gray-500 mt-1">
                    贵州四季分明，气候宜人，是休闲养生的绝佳之地。本文为您推荐贵州各季节最适合养生的景点和特色项目...
                </div>
                <div class="grid grid-cols-3 gap-2 mt-2">
                    <img src="https://via.placeholder.com/120x120?text=图1" class="w-full h-20 object-cover rounded" alt="文章图片">
                    <img src="https://via.placeholder.com/120x120?text=图2" class="w-full h-20 object-cover rounded" alt="文章图片">
                    <img src="https://via.placeholder.com/120x120?text=图3" class="w-full h-20 object-cover rounded" alt="文章图片">
                </div>
                <div class="flex justify-between items-center mt-2">
                    <div class="text-xs text-gray-500">作者：贵州旅游达人</div>
                    <div class="text-xs text-gray-500">收藏于：2025-05-10</div>
                </div>
            </div>
            <div class="p-3 flex justify-end border-t border-gray-100">
                <button class="secondary-btn mr-2">查看详情</button>
                <button class="outline-btn">分享</button>
            </div>
        </div>
    </div>

    <!-- 管理模式底部操作栏（默认隐藏） -->
    <div class="fixed bottom-16 left-0 right-0 p-3 action-bar hidden" id="actionBar">
        <div class="flex justify-between items-center">
            <div class="flex items-center">
                <input type="checkbox" id="selectAll" class="mr-2">
                <label for="selectAll" class="text-sm">全选</label>
            </div>
            <div>
                <button class="secondary-btn mr-2">取消收藏</button>
                <button class="primary-btn">完成</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-2">
            <a href="../core/home.html" class="nav-item">
                <i class="icon iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="../core/discover.html" class="nav-item">
                <i class="icon iconfont icon-discover"></i>
                <span>发现</span>
            </a>
            <a href="../core/messages.html" class="nav-item">
                <i class="icon iconfont icon-message"></i>
                <span>消息</span>
            </a>
            <a href="../core/profile.html" class="nav-item active">
                <i class="icon iconfont icon-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

    <script>
        // 简单的交互逻辑，用于展示管理模式
        document.getElementById('editBtn').addEventListener('click', function() {
            const actionBar = document.getElementById('actionBar');
            if (actionBar.classList.contains('hidden')) {
                actionBar.classList.remove('hidden');
                this.textContent = '取消';
            } else {
                actionBar.classList.add('hidden');
                this.textContent = '管理';
            }
        });
    </script>
</body>
</html> 